<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情感分析</title>
    {% load static %}
    <!-- <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}"> -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link href="{% static 'plugins/bootstrap-5.3.0/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/training.css' %}" rel="stylesheet">

<style>
.custom-file-upload {
margin: 5px 0;
border: 1px dashed #ccc;
border-radius: 4px;
padding: 3px;
background-color: white;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
}

.custom-file-upload:hover {
border-color: #007bff;
background-color: #f8f9fa;
}

.custom-file-upload i {
font-size: 24px;
margin-right: 1px;
}

.upload-container {
transition: all 0.3s ease;
}

.feedback-message {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10000;
display: none;
align-items: center;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
animation: fadeInOut 4s ease-in-out forwards;
}

.feedback-message.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}

.feedback-message.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}

.feedback-icon {
margin-right: 8px;
}

@keyframes fadeInOut {
0% {
opacity: 0;
top: 0;
}
10% {
opacity: 1;
top: 20px;
}
90% {
opacity: 1;
top: 20px;
}
100% {
opacity: 0;
top: 0;
}
}

/* 确保文件详情区域始终显示 */
.file-details {
margin-top: 5px;
}

/* 文件名和大小样式 */
.file-info-label {
font-weight: bold;
color: #666;
}

.file-info-value {
font-weight: bold;
color: #333;
}

/* 添加结果列表样式 */
.results-container {
margin-top: 300px;
padding: 20px;
max-height: 400px; /* 限制高度，超出后自动出现滚动条 */
overflow-y: auto; /* 垂直方向滚动 */
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 历史记录表格强制对齐 */
.results-table {
width: 97%;
table-layout: fixed;
border-collapse: collapse;
background-color: white;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-left: 1%;
}

.results-table th,
.results-table td {
padding: 12px 15px;
border-bottom: 1px solid #dee2e6;
word-wrap: break-word;
text-align: center;
vertical-align: middle;
}

.results-table th:nth-child(1),
.results-table td:nth-child(1) {
width: 11%; /* 编号 */
}

.results-table th:nth-child(2),
.results-table td:nth-child(2) {
width: 40%; /* 视频文件名 */
text-align: left;
}

.results-table th:nth-child(3),
.results-table td:nth-child(3) {
width: 15%; /* 文件大小 */
}

.results-table th:nth-child(4),
.results-table td:nth-child(4) {
width: 15%; /* 情感类型 */
}

.results-table th:nth-child(5),
.results-table td:nth-child(5) {
width: 12%; /* 分析帧数 */
}

.module-header {
background-color: #337ab7;
color: white;
padding: 12px 15px;
margin: 0; /* 清除 margin */
border-radius: 10px 10px 0 0;
text-align: center;
font-weight: bold;
width: 100%; /* 宽度100% */
box-sizing: border-box; /* 确保 padding 不影响宽度 */
}

/* 调整模块的 padding，避免标题覆盖内容 */
.module {
padding: 0; /* 清除模块的内边距 */
padding-top: 20px; /* 只保留上内边距，给标题留空间 */
width: 26%;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
text-align: center;
}
.module-container {
display: flex;
justify-content: center;
position: relative; /* 保持relative定位 */
top: 0;
left: 0;
transform: none;
width: 100%;
max-width: 1400px;
gap: 5%;
margin: 10px auto;
padding-top: 0; /* 确保无额外上内边距 */
}
.current-result-content p {
margin: 15px 0;
text-align: left;
padding-left: 20%;
}

.emotion-result {
font-size: 18px;
font-weight: bold;
}

.emotion-positive {
color: #28a745;
}

.emotion-negative {
color: #dc3545;
}

.emotion-neutral {
color: #ffc107;
}

.progress-container {
margin-top: 15px;
display: none;
}

.progress {
height: 20px;
margin-bottom: 10px;
border-radius: 10px;
background-color: #f5f5f5;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar {
height: 100%;
border-radius: 10px;
background-color: #337ab7;
width: 0%;
transition: width 0.3s ease;
text-align: center;
line-height: 20px;
color: white;
}

.progress-text {
font-size: 12px;
color: #666;
text-align: center;
}

.upload-btn {
background-color: #337ab7;
color: white;
border: none;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
min-width: 100px;
}

.upload-btn:hover {
background-color: #286090;
}

.upload-btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
}

.upload-btn.uploading {
background-color: #f0ad4e;
}

.function_link {
text-decoration: none;
color: inherit;
font-size: 18px;
margin-left: 8px;
}

/* 新增样例视频模块样式 */
/*.sample-videos-container {*/
/*    width: 90%;*/
/*    max-width: 1400px;*/
/*    margin: 250px auto 30px;*/
/*    padding: 20px;*/
/*    background-color: #f9f9f9;*/
/*    border-radius: 10px;*/
/*    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);*/
/*    text-align: center;*/
/*}*/
.sample-videos-container {
width: 90%;
max-width: 1400px;
margin: 40px auto 30px;  /* 减少上边距，因为模块容器不再是绝对定位 */
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
text-align: center;
}

.sample-videos-header {
background-color: #337ab7;
color: white;
padding: 10px 15px;
margin: -20px -20px 20px -20px;
border-radius: 10px 10px 0 0;
text-align: center;
font-weight: bold;
}

.sample-videos-grid {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}

.sample-video-item {
width: 30%;
min-width: 250px;
background-color: white;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.sample-video-item:hover {
transform: translateY(-5px);
}

.sample-video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 比例 */
height: 0;
overflow: hidden;
margin-bottom: 10px;
border-radius: 5px;
background-color: #000;
}

.sample-video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}

.sample-video-info {
text-align: left;
margin-top: 10px;
}

.sample-video-info p {
margin: 5px 0;
font-size: 14px;
}

.video-info-label {
font-weight: bold;
color: #666;
}

.video-info-value {
font-weight: bold;
color: #333;
}
/* 若只想让主内容区域滚动（可选），可保留下面这段 */
.main_content {
overflow-y: auto;
min-height: 90vh;     /* 保证至少一屏高 */
}

.home-link {
  text-decoration: none; /* 去除下划线 */
  color: white; /* 继承按钮文字颜色 */
  display: inline-block; /* 确保点击区域与按钮一致 */
}

/* 按钮样式调整 */
.home-btn {
  padding: 15px !important; /* 确保内边距生效 */
  font-size: 25px !important; /* 确保字体大小生效 */
  background-color: #156bb7;
  border-radius: 4px; /* 统一圆角 */
  transition: all 0.2s ease; /* 平滑过渡效果 */
  border: none; /* 去除边框 */
  cursor: pointer; /* 鼠标指针样式 */
}

/* 悬停效果 */
.home-btn:hover {
  opacity: 0.9; /* 轻微透明效果 */
  transform: translateY(-2px); /* 轻微上浮 */
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3); /* 增强阴影 */
}

/* 点击效果 */
.home-btn:active {
  transform: translateY(0); /* 恢复位置 */
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2); /* 减弱阴影 */
}

/* 确保按钮在各种状态下样式一致 */
.home-link:visited .home-btn {
  color: #fff; /* 访问后保持白色文字 */
}
</style>
</head>
<body>
<!-- 反馈消息元素（固定在页面顶部） -->
<div class="feedback-message success" id="feedbackMessage">
    <svg class="bi flex-shrink-0 me-2 feedback-icon" width="20" height="20" role="img" aria-label="Success:">
        <use xlink:href="#check-circle-fill"/>
    </svg>
    <span class="feedback-text">上传成功</span>
</div>

<!-- 错误反馈消息 -->
<div class="feedback-message error" id="errorMessage">
    <svg class="bi flex-shrink-0 me-2 feedback-icon" width="20" height="20" role="img" aria-label="Error:">
        <use xlink:href="#x-circle-fill"/>
    </svg>
    <span class="feedback-text">上传失败：文件过大（超过800MB）</span>
</div>

<!-- 添加SVG图标定义（Bootstrap Icons） -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
    </symbol>
    <symbol id="x-circle-fill" fill="currentColor" viewBox="0 0 16 16">
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
    </symbol>
</svg>

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
    <div class="container-fluid">
        <a class="navbar-brand d-flex align-items-center" href="#">
            <!-- <img src="{% static 'images/logo.png' %}" alt="Logo" class="nav-logo me-2"> -->
            <div class="nav-title">情感分析与智能引导</div>
        </a>
 
        <div class="user-actions">
          <!-- <el-button type="primary" class="login-btn">登录</el-button> -->
          <a href="http://10.68.100.169:25001/M6/" class="home-link">
            <el-button type="primary" class="register-btn home-btn" style="padding: 25px;font-size: 25px;">回到首页</el-button>
          </a>
        </div>
    </div>
</nav>

<!-- 左侧导航栏 -->
<div class="sidebar-container">
        <div class="sidebar" style="margin-top: 45px;">
            <h2 class="sidebar-title">功能模块</h2>
            <ul class="nav-list">
                <li class="nav-item" style="margin-left:20px;">
                    <a href="/emotion/upload" class="active function_link" style="font-size: 25px;">情感分析</a>
                </li>
                <li class="nav-item" style="margin-left:20px;">
                    <a href="/intelligence/interaction" class="active function_link" style="font-size: 25px;">文本引导</a>
                </li>
                <li class="nav-item" style="margin-left:20px;">
                    <a href="/intelligence/image_generator" class="active function_link" style="font-size: 25px;">图片引导</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 主内容 -->
<div class="main_content">
    <div class="module-container" style="margin-top: 35px;">
        <!-- 上传模块 -->
        <div class="upload-container module">
            <div class="module-header">上传待检测文件</div>
            <form id="uploadForm" enctype="multipart/form-data">
                <div class="file-input-group">
                    <div class="custom-file-upload" id="fileInputLabel">
                        <i>📁</i>
                        <span id="fileNameDisplay" style="font-size: 16px; color: #666;">点击选择文件</span>
                        <input class="form-control" type="file" id="formFileMultiple" name="file" multiple
                               accept="video/mp4,video/*" required style="display: none;">
                    </div>
                </div>
                <!-- 文件详情区域始终显示 -->
                <div class="file-details" id="fileDetails" style="margin-top: 15px;">
                    <p style="margin: 5px 0;"><span class="file-info-label">文件名：</span><span id="fileName"
                                                                                                class="file-info-value"></span>
                    </p>
                    <p style="margin: 5px 0;"><span class="file-info-label">文件大小：</span><span id="fileSize"
                                                                                                  class="file-info-value"></span>
                        MB</p>
                </div>
                <div class="upload-btn-container" style="margin-top: 15px;">
                    <button type="submit" class="upload-btn" id="sendButton">上传</button>
                </div>
            </form>
        </div>

        <!-- 当前识别结果模块 -->
        <div class="current-result-container module">
            <div class="module-header">当前识别结果</div>
            <div class="current-result-content">
                <p>
                    <span style="font-weight: bold; color: #666;">文件名称：</span>
                    <span style="font-weight: bold; color: #333;" id="currentFileName">无</span>
                </p>
                <p>
                    <span style="font-weight: bold; color: #666;">文件大小：</span>
                    <span style="font-weight: bold; color: #333;" id="currentFileSize">无</span>
                </p>
                <p>
                    <span style="font-weight: bold; color: #666;">情感类型：</span>
                    <span style="font-weight: bold; color: #333;" id="currentEmotion">无</span>
                </p>
                <p>
                    <span style="font-weight: bold; color: #666;">分析帧数：</span>
                    <span style="font-weight: bold; color: #333;" id="currentConfidence">无</span>
                </p>
            </div>
        </div>

        <!-- 模型信息模块 -->
        <div class="model-info-container module">
            <div class="module-header">模型信息</div>
            <div class="model-info-content">
                <p style="margin: 40px 0;">
                    <span style="font-weight: bold; color: #666;">模型名称：</span>
                    <span style="font-weight: bold; color: #333;">情感分析模型V1.0</span>
                </p>
                <!-- <p style="margin: 20px 0;">
                    <span style="font-weight: bold; color: #666;">准确率：</span>
                    <span style="font-weight: bold; color: #333;">xx%</span>
                </p> -->
                <p style="margin: 40px 0;">
                    <span style="font-weight: bold; color: #666;">支持模态：</span>
                    <span style="font-weight: bold; color: #333;">视频</span>
                </p>
            </div>
        </div>
    </div>

    <!-- 样例视频模块 -->
    <div class="sample-videos-container">
        <div class="sample-videos-header">样例演示视频</div>
        <div class="sample-videos-grid">
            <!-- 视频1 -->
            <div class="sample-video-item">
                <div class="sample-video-wrapper">
                    <video controls>
                        <source src="{% static 'videos/demo1.mp4' %}" type="video/mp4">
                        您的浏览器不支持视频标签。
                    </video>
                </div>
                <div class="sample-video-info">
                    <p><span class="video-info-label">文件名：</span><span
                            class="video-info-value">demo1.mp4</span></p>
                    <p><span class="video-info-label">文件大小：</span><span class="video-info-value">1.78 MB</span></p>
                </div>
                <button class="btn btn-primary btn-sm upload-sample-btn mt-2"
                        data-src="{% static 'videos/demo1.mp4' %}">上传识别</button>

            </div>

            <!-- 视频2 -->
            <div class="sample-video-item">
                <div class="sample-video-wrapper">
                    <video controls>
                        <source src="{% static 'videos/demo2.mp4' %}" type="video/mp4">
                        您的浏览器不支持视频标签。
                    </video>
                </div>
                <div class="sample-video-info">
                    <p><span class="video-info-label">文件名：</span><span
                            class="video-info-value">demo2.mp4</span></p>
                    <p><span class="video-info-label">文件大小：</span><span class="video-info-value">2.35 MB</span></p>
                </div>
                <button class="btn btn-primary btn-sm upload-sample-btn mt-2"
                        data-src="{% static 'videos/demo2.mp4' %}">上传识别</button>
            </div>

            <!-- 视频3 -->
            <div class="sample-video-item">
                <div class="sample-video-wrapper">
                    <video controls>
                        <source src="{% static 'videos/demo3.mp4' %}" type="video/mp4">
                        您的浏览器不支持视频标签。
                    </video>
                </div>
                <div class="sample-video-info">
                    <p><span class="video-info-label">文件名：</span><span
                            class="video-info-value">demo3.mp4</span></p>
                    <p><span class="video-info-label">文件大小：</span><span class="video-info-value">3.03 MB</span></p>
                </div>
                <button class="btn btn-primary btn-sm upload-sample-btn mt-2"
                        data-src="{% static 'videos/demo3.mp4' %}">上传识别</button>
            </div>
        </div>
    </div>

    <!-- 历史记录列表区域 -->
    <div class="results-container" style="margin-top: 30px;">
        <h4 style="margin-bottom: 20px;  margin-left: 2%; color: #333;">历史记录</h4>
        <table class="results-table">
            <thead>
            <tr>
                <th>编号</th>
                <th>视频文件名</th>
                <th>文件大小</th>
                <th>情感类型</th>
                <th>分析帧数</th>
            </tr>
            </thead>
            <tbody id="resultsTableBody">
            <!-- 结果将通过JavaScript动态添加 -->
            </tbody>
        </table>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('uploadForm');
        const feedbackMessage = document.getElementById('feedbackMessage');
        const errorMessage = document.getElementById('errorMessage');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        const fileInput = document.getElementById('formFileMultiple');
        const fileNameDisplay = document.getElementById('fileNameDisplay');
        const currentFileName = document.getElementById('currentFileName');
        const currentFileSize = document.getElementById('currentFileSize');
        const currentEmotion = document.getElementById('currentEmotion');
        const currentConfidence = document.getElementById('currentConfidence');
        const tbody = document.getElementById('resultsTableBody');
        const sendButton = document.getElementById('sendButton');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');

        // 用于存储定时器ID，以便可以清除
        let hideFileInfoTimeout = null;
        let resultIndex = 1; // 全局编号

        // 重置文件信息（隐藏文件详情）
        function resetFileInfo() {
            // 清空文件名和大小显示
            fileName.textContent = '';
            fileSize.textContent = '';

            // 重置文件选择显示
            fileNameDisplay.textContent = '点击选择文件';
            fileNameDisplay.style.color = '#666';

            // 清空文件输入
            fileInput.value = '';
        }

        // 显示反馈消息
        function showFeedback(messageElement, messageText) {
            // 隐藏所有反馈消息
            feedbackMessage.style.display = 'none';
            errorMessage.style.display = 'none';

            // 设置并显示指定的反馈消息
            messageElement.querySelector('.feedback-text').textContent = messageText;
            messageElement.style.display = 'flex';

            // 2.5秒后自动隐藏
            setTimeout(() => {
                messageElement.style.display = 'none';
            }, 2500);
        }

        function showSuccess(message) {
            showFeedback(feedbackMessage, message);
        }

        function showError(message) {
            showFeedback(errorMessage, message);
        }

        // 根据情感类型设置不同样式
        function setEmotionStyle(emotion) {
            // 移除所有可能的情感类
            currentEmotion.classList.remove('emotion-positive', 'emotion-negative', 'emotion-neutral');

            // 根据情感类型添加对应的类
            if (emotion.includes('积极') || emotion.includes('happy') || emotion.includes('positive')) {
                currentEmotion.classList.add('emotion-positive');
            } else if (emotion.includes('消极') || emotion.includes('sad') || emotion.includes('negative')) {
                currentEmotion.classList.add('emotion-negative');
            } else if (emotion.includes('中性') || emotion.includes('neutral')) {
                currentEmotion.classList.add('emotion-neutral');
            }
        }

        // 核心函数：从服务器加载并渲染结果到表格
        function loadResultsFromServer() {
            axios.get("{% url 'get_results' %}")
                    .then(function (response) {
                        const results = response.data.results;
                        tbody.innerHTML = ''; // 清空现有表格内容

                        if (results && results.length > 0) {
                            // 反向渲染结果，最新的在前面
                            results.slice().reverse().forEach(result => {
                                const tr = document.createElement('tr');
                                tr.innerHTML = `
                                    <td>${result.id}</td>
                                    <td>${result.filename}</td>
                                    <td>${result.size}</td>
                                    <td>${result.emotion}</td>
                                    <td>${result.confidence}</td>
                                `;
                                tbody.appendChild(tr);
                            });

                            // 更新当前识别结果模块为最新结果
                            const latestResult = results[results.length - 1]; // 获取最新结果（数组最后一个）
                            updateCurrentResult(latestResult);
                        }
                    })
                    .catch(function (error) {
                        console.error('加载历史结果失败:', error);
                        showError('加载历史结果失败');
                    });
        }

        // 更新当前识别结果模块
        function updateCurrentResult(result) {
            if (result) {
                currentFileName.textContent = result.filename || '无';
                currentFileSize.textContent = result.size || '无';

                // 设置情感结果及样式
                const emotion = result.emotion || '无';
                currentEmotion.textContent = emotion;
                setEmotionStyle(emotion);

                // 设置分析帧数
                currentConfidence.textContent = result.confidence || '无';
            } else {
                // 重置为无结果状态
                currentFileName.textContent = '无';
                currentFileSize.textContent = '无';
                currentEmotion.textContent = '无';
                currentEmotion.className = 'emotion-result';
                currentConfidence.textContent = '无';
            }
        }

        // 点击文件选择区域触发文件输入
        document.getElementById('fileInputLabel').addEventListener('click', () => {
            fileInput.click();
        });

        // 文件选择变化处理
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                if (hideFileInfoTimeout) {
                    clearTimeout(hideFileInfoTimeout);
                    hideFileInfoTimeout = null;
                }

                fileNameDisplay.textContent = file.name;
                fileNameDisplay.style.color = '#333';

                // 更新文件信息
                fileName.textContent = file.name;
                fileSize.textContent = (file.size / (1024 * 1024)).toFixed(2);
            } else {
                resetFileInfo();
            }
        });

        // 表单提交处理
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            const file = fileInput.files[0];
            if (!file) {
                showError('请选择文件');
                return;
            }
            if (file.size > 800 * 1024 * 1024) {
                showError('上传失败：文件过大（超过800MB）');
                hideFileInfoTimeout = setTimeout(() => {
                    resetFileInfo();
                }, 2000);
                return;
            }

            const formData = new FormData();
            formData.append('mp4_file', file);

            // 更新按钮状态
            sendButton.disabled = true;
            sendButton.classList.add('uploading');
            sendButton.textContent = '上传中...';

            // 使用Axios上传文件
            axios.post("{% url 'upload_mp4' %}", formData, {
                headers: {
                    'X-CSRFToken': ' csrf_token ',
                    'Content-Type': 'multipart/form-data'
                }
            })
                    .then(function (response) {
                        const result = response.data;
                        if (result.status === 'success') {
                            showSuccess('上传并处理成功');

                            // 加载历史结果（会自动更新当前结果）
                            loadResultsFromServer();

                            // 2秒后重置文件信息
                            setTimeout(() => {
                                resetFileInfo();
                            }, 2000);
                        } else {
                            showError(result.error || '上传失败');
                            setTimeout(() => {
                                resetFileInfo();
                            }, 2000);
                        }
                    })
                    .catch(function (error) {
                        showError('上传失败: ' + (error.message || '未知错误'));
                        setTimeout(() => {
                            resetFileInfo();
                        }, 2000);
                    })
                    .finally(function () {
                        sendButton.disabled = false;
                        sendButton.classList.remove('uploading');
                        sendButton.textContent = '上传';
                    });
        });

        // 页面加载时读取并显示所有结果
        loadResultsFromServer();


        document.querySelectorAll('.upload-sample-btn').forEach(button => {
            button.addEventListener('click', () => {
                const fileUrl = button.getAttribute('data-src');
                const fileName = fileUrl.split('/').pop();

                // 创建 Blob 对象模拟文件上传
                fetch(fileUrl)
                    .then(res => res.blob())
                    .then(blob => {
                        const file = new File([blob], fileName, { type: 'video/mp4' });

                        // 模拟文件选择
                        const dt = new DataTransfer();
                        dt.items.add(file);
                        fileInput.files = dt.files;

                        // 触发 change 事件
                        fileInput.dispatchEvent(new Event('change'));

                        // 自动提交表单
                        form.dispatchEvent(new Event('submit'));
                    })
                    .catch(err => {
                        console.error('加载样例视频失败:', err);
                        showError('加载样例视频失败');
                    });
            });
});

    });
</script>

<!-- 联系我们模态框 -->
<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="contactModalLabel">联系我们</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="name" class="form-label">姓名</label>
                        <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱">
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">消息</label>
                        <textarea class="form-control" id="message" rows="3" placeholder="请输入您的消息"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">发送</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入Bootstrap JavaScript -->
<script src="{% static 'js/jquery.js' %}"></script>
<!--<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>-->
<script src="{% static 'plugins/bootstrap-5.3.0/css/bootstrap.min.css' %}"></script>
</body>
</html>